<template>
	<view class="flex flex-ai-center search_box flex-js-sb">
		<input type="text" style="color: #222;" :placeholder="placeholder" @confirm="searchJump" placeholder-class="pl_class" v-model="value"
			class="ml-4 font-size-14">
		<view class="search-icon-box flex flex-ai-center flex-js-center">
			<w-icon @click="searchJump" name="index-search-icon" :size="27.86/2"></w-icon>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				value: '',
				placeholder: '搜索商品',
				is_edit: false
			}
		},
		mounted() {
			if (this.appConfig.hot_search) {
				let searchArr = this.appConfig.hot_search.split(',')
				this.placeholder = searchArr[0]
				this.is_edit = true
				let index = 0
				this.times = setInterval(() => {
					index++
					if (index > searchArr.length - 1) index = 0
					this.placeholder = searchArr[index]
				}, 5000)
			}
		},
		onUnload() {
			clearInterval(this.times)
		},
		methods: {
			searchJump() {
				uni.navigateTo({
					url: `/pages/market/search?keywords=${this.value?this.value:this.is_edit?this.placeholder:''}`
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	.search_box {
		width: 452rpx;
		height: 62rpx;
		background: linear-gradient( 90deg, #ECFFF9 0%, #FEFEFF 50%, #F3F6FE 100%);
		border-radius: 33rpx 33rpx 33rpx 33rpx;
		border: 3rpx solid #000000;
		padding:10rpx 10rpx 10rpx 30rpx;

		.pl_class {
			font-family: Source Han Sans CN VF, Source Han Sans CN VF;
			font-weight: 400;
			font-size: 22rpx;
			color: #C2D1D4;
		}
		.search-icon-box {
			width: 74rpx;
			height: 50rpx;
			background: #1E1E1C;
			border-radius: 27rpx 27rpx 27rpx 27rpx;
		}
	}
</style>